import React, { useEffect, useState, useRef } from 'react';
import { AppstoreOutlined, SettingOutlined, DeploymentUnitOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';

import { Menu } from 'antd';
import { animateScroll as scroll } from 'react-scroll';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const items: MenuProps['items'] = [
  getItem('平台简介', 'sub1', <AppstoreOutlined />, [
    getItem('适用对象', '1'),
    getItem('业务背景', '2'),
  ]),

  { type: 'divider' },

  getItem('功能说明', 'sub2', <DeploymentUnitOutlined />, [
    { type: 'divider' },
    getItem('数据汇聚', '3'),
    { type: 'divider' },
    getItem(
      '数据管理',
      'g1',
      null,
      [getItem('多元查询', '4'), getItem('联邦分布式', '5')],
      'group',
    ),
    { type: 'divider' },
    getItem('风险发现', 'g2', null, [getItem('舆情监测', '6')], 'group'),
    { type: 'divider' },
    getItem(
      '风险分析',
      'g3',
      null,
      [getItem('股权网络穿透', '7'), getItem('控制权计算', '8'), getItem('可视化分析', '9')],
      'group',
    ),
    { type: 'divider' },
    getItem(
      '风险防控',
      'g4',
      null,
      [getItem('票据欺诈识别', '10'), getItem('发债企业风险预警', '11')],
      'group',
    ),
  ]),

  { type: 'divider' },
];

const App: React.FC = () => {
  const [activeMenu, setActiveMenu] = useState('1');

  const sidebarRef = useRef(null);
  const sidebarStartTop = useRef(0); // 设置初始距离为50px

  useEffect(() => {
    // 获取侧边栏的初始高度和距顶部的距离
    if (sidebarRef.current) {
      sidebarStartTop.current += sidebarRef.current.getBoundingClientRect().top;
      sidebarRef.current.style.top = sidebarStartTop.current + 'px';
      sidebarRef.current.style.height = `calc(100% - ${sidebarStartTop.current}px)`;
    }

    // 监听滚动事件
    const handleScroll = () => {
      const scrollTop = window.scrollY || window.pageYOffset;
      const newTop = Math.max(0, sidebarStartTop.current - scrollTop);
      sidebarRef.current.style.top = newTop + 'px';
      sidebarRef.current.style.height = `calc(100% - ${newTop}px)`;
      sidebarRef.current.style.height = `calc(100% - ${newTop}px)`;

      if (scrollTop >= 3150) {
        setActiveMenu('11');
      } else if (scrollTop >= 3080) {
        setActiveMenu('10');
      } else if (scrollTop >= 3000) {
        setActiveMenu('9');
      } else if (scrollTop >= 2880) {
        setActiveMenu('8');
      } else if (scrollTop >= 2590) {
        setActiveMenu('7');
      } else if (scrollTop >= 2100) {
        setActiveMenu('6');
      } else if (scrollTop >= 1560) {
        setActiveMenu('5');
      } else if (scrollTop >= 1070) {
        setActiveMenu('4');
      } else if (scrollTop >= 590) {
        setActiveMenu('3');
      } else if (scrollTop >= 260) {
        setActiveMenu('2');
      } else {
        setActiveMenu('1');
      }
    };

    window.addEventListener('scroll', handleScroll);

    // 组件卸载时移除滚动事件监听器
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const onClick: MenuProps['onClick'] = (e) => {
    //setSelectedKey(e.keyPath[0]);
    console.log(e.keyPath[0]);

    switch (e.keyPath[0]) {
      case '1':
        scroll.scrollToTop({
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '2':
        scroll.scrollTo(260, {
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '3':
        scroll.scrollTo(590, {
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '4':
        scroll.scrollTo(1070, {
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '5':
        scroll.scrollTo(1560, {
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '6':
        scroll.scrollTo(2100, {
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '7':
        scroll.scrollTo(2590, {
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '8':
        scroll.scrollTo(2880, {
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '9':
        scroll.scrollTo(3000, {
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '10':
        scroll.scrollTo(3080, {
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;
      case '11':
        scroll.scrollToBottom({
          duration: 500, // 滚动持续时间，单位为毫秒
          smooth: true, // 平滑滚动
          offset: -50, // 滚动结束后页面内容稍微往上偏移 50px
        });
        break;

      default:
        break;
    }
  };

  const divStyle = {
    position: 'relative' as const,
    left: '390px',
    width: '850px',
  };
  const headStyle1 = {
    fontSize: '26px',
    fontWeight: '999',
  };
  const headStyle = {
    fontSize: '20px',
    fontWeight: '999',
  };
  const textStyle1 = {
    fontSize: '16px',
    fontWeight: '999',
  };
  const textStyle2 = {
    fontSize: '18px',
    fontWeight: '999',
  };
  const textStyle = {
    fontSize: '16px',
    fontWeight: '500',
  };

  return (
    <div style={{ display: 'flex' }}>
      <div
        className="sidebar"
        ref={sidebarRef}
        style={{ width: '302px', overflowY: 'auto', position: 'fixed', top: '50px', left: '0px' }}
      >
        <Menu
          onClick={onClick}
          style={{ width: '300px', height: '100%' }}
          //defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1', 'sub2']}
          selectedKeys={[activeMenu]}
          mode="inline"
          items={items}
        />
      </div>
      <div style={{ flex: 1, padding: '16px' }}>
        <div style={divStyle}>
          <h1 style={headStyle1}>一、平台简介</h1>
        </div>
        <div id="1" style={divStyle}>
          <h1 style={headStyle}>1、适用对象</h1>
          <p style={textStyle}>
            系统的适用对象主要是广大企业和金融机构，可以提供基于亿级跨领域数据的股权网络穿透和金融舆情监测服务，为企业的经营管理出谋划策，为金融机构的融资过程提效降本，帮助银行、证券公司拓展核心业务能力，实现对系统性金融风险的防范与化解，取得经济与社会效益。
          </p>
        </div>
        <div id="2" style={divStyle}>
          <h1 style={headStyle}>2、业务背景</h1>
          <p style={textStyle}>
            党的二十大报告指出，要加强和完善现代金融监管，强化金融稳定保障体系，依法将各类金融活动全部纳入监管，守住不发生系统性风险底线。近年来，金融行业间的高度关联性日趋明显，随之产生的股权数据、交易数据、舆情数据等金融数据激增且异常庞杂，发现和分析金融数据中关键风险特征结构对金融市场的风险监管有着重要意义。而由于信息不对称、数据产权等问题的存在，跨机构、多源的数据分析难以有效实现；另外，交叉持股、借壳上市等现象导致企业实际股权构成纷繁复杂，而传统的金融风险监管手段对大规模金融网络的穿透力不足。
          </p>

          <p style={textStyle}>
            针对以上问题，平台以金融时序知识图谱为核心技术，同时借助金融跨领域数据汇聚技术、联邦型分布式知识图谱管理方法等大数据关键技术，为使用者提供多元查询、可视化分析、股权网络穿透、企业风险预警和票据欺诈识别等主要功能，并展示数据监测与数据管理等数据汇聚页面及相关操作。
          </p>
        </div>
        <div style={divStyle}>
          <h1 style={headStyle1}>二、功能说明</h1>
        </div>
        <div id="3" style={divStyle}>
          <h1 style={headStyle}>1、数据汇聚</h1>
          <p style={textStyle1}>- 需求背景 ：</p>
          <p style={textStyle}>
            金融领域数据具有多源、异构、时序的特点，数据汇聚需要保证数据的集成性、完整性、一致性与访问安全性；需要设计数据访问接口，实现统一访问。
          </p>
          <p style={textStyle1}>- 功能概述：</p>
          <p style={textStyle}>1. 数据实时获取、更新、存储</p>
          <p style={textStyle}>2. 数据分布式管理、备份，提高数据访问速度</p>
          <p style={textStyle}>3. 数据增量同步，采用时间戳、数据备份日志、触发器、快照表等技术</p>
          <p style={textStyle}>4. 舆情数据预警，根据关键词对数据进行过滤预警</p>
          <p style={textStyle}>5. 用户自定义网站的爬取，用户输入网址，自动爬取内容存储到数据库</p>
        </div>
        <div style={divStyle}>
          <h1 style={headStyle}>2、数据管理</h1>
          <p style={textStyle}>主要包含多元查询与联邦分布式两部分。</p>
        </div>
        <div id="4" style={divStyle}>
          <p style={textStyle2}>①多元查询</p>
          <p style={textStyle}>主要有实体查询、路径查询与多跳查询三个模块。 </p>
          <p style={textStyle1}>实体查询：</p>
          <p style={textStyle}>
            1.
            功能描述：对实体等基本内容进行查询，模糊匹配，返回结果是查询的实体。展示查询实体相关5信息及与其关联的实体；
          </p>
          <p style={textStyle}>
            2. 功能接口：在返回的结果图中结点上，设置风险识别、舆情监测、股权穿透等功能接口；
          </p>
          <p style={textStyle}>
            3.
            时间轴：在返回的结果图下设置时间轴，结果默认显示图立方中最新的数据，用户可滑动时间轴选择不同时间查看返回结果，对比分析实体及其关联实体关系变化。
          </p>
          <p style={textStyle1}>路径查询：</p>
          <p style={textStyle}>
            1. 功能描述：对两个实体间的关联路径进行查询，输入实体A、B，展示A、B间的所有路径；
          </p>
          <p style={textStyle}>2. 关系筛选：用户可自定义展示/不展示某些关系；</p>
          <p style={textStyle}>
            3.
            时间轴：在返回结果中设置时间轴，默认显示最新数据，用户可滑动时间轴选择不同时间查看返回结果，对比分析实体A、B间路径变化。
          </p>
        </div>
        <div id="5" style={divStyle}>
          <p style={textStyle2}>②联邦分布式</p>
          <p style={textStyle1}>- 需求背景：</p>
          <p style={textStyle}>
            数据往往分布在多个独立自治的RDF数据源，而查询往往涉及多个数据源，因此需使用联邦分布式平台对多个数据源进行融合，从而提供与本地单数据源一致的查询服务。
          </p>
          <p style={textStyle1}>- 实施方案任务目标：</p>
          <p style={textStyle}>
            研究联邦型分布式知识图谱管理方法，将结构化查询分解成子查询并传送到对应的数据源，让这些数据源分别对子查询独立地进行处理并得到局部解，然后将这些局部解进行融合得到最终解，以实现金融图立方的高效管理。
          </p>
          <p style={textStyle1}>- 功能概述：</p>
          <p style={textStyle}>通过联邦分布式平台实现多个独立RDF数据源的“透明”查询</p>
          <p style={textStyle1}>- 产品设计：</p>
          <p style={textStyle}>
            1. 现有前端设计基本能展现查询分解、执行、融合等步骤，可视化情况考虑优化。
          </p>
          <p style={textStyle}>
            2.
            初步支持异质数据源上的联邦分布式查询。即通过联邦分布式平台对外提供统一的sparql查询接口，而底层采用各型rdf数据源、实验性超图数据源。
          </p>
        </div>
        <div style={divStyle}>
          <h1 style={headStyle}>3、风险发现</h1>
        </div>
        <div id="6" style={divStyle}>
          <h1 style={textStyle2}>①舆情监测</h1>
          <p style={textStyle1}>- 实施方案任务目标：</p>
          <p style={textStyle}>
            利用金融图立方会资本市场发生的金融舆情时间和投资者情绪变化进行精准识别，并融合事件、关系进行风险传导建模，最后基于多源知识表示学习以及多视角信息融合模型，实现资本市场舆情风险的监测和防范。
          </p>
          <p style={textStyle1}>- 研究内容：</p>
          <p style={textStyle}>
            研究融合外部知识与公司间关联的金融新闻序列表示学习模型，并应用与企业舆情风险的预测任务（例如，上市公司累积异常回报的预测）。
          </p>
          <p style={textStyle1}>- 功能概述：</p>
          <p style={textStyle}>
            1. 新闻文本与公司实体关联发现
            给定新闻文本，利用一定算法匹配出新闻涉及的相关公司实体，建立新闻文本与公司实体间多对多的关联，从而实现由实体查新闻由新闻看实体的效果。
          </p>
          <p style={textStyle}>
            2. 新闻文本风险（股票波动）贡献度定量分析
            构建深度神经网络，利用输入的特定公司相关的时间窗口内的新闻文本序列，预测公司在当前时间点的股票波动指标（累积异常回报或涨跌趋势等），通过模型中的attention机制将不同粒度下文本对于最终预测的贡献度可视化出来。
          </p>
        </div>
        <div style={divStyle}>
          <h1 style={headStyle}>4、风险分析</h1>
        </div>
        <div id="7" style={divStyle}>
          <h1 style={textStyle2}>①股权网络穿透</h1>
          <p style={textStyle}>
            研究金融机构股权网络的深度分析方法，发现蕴含潜在金融风险的金融股权网络结构，如环状持股、资本系等；同时通过多层股权网络穿透，找到实际控制人、一致行动人和关联交易方、最终股东等关键结点，实现对金融机构股权网络穿透式监管。
          </p>
          <p style={textStyle1}>- 功能概述：</p>
          <p style={textStyle}>
            1.
            多层股权网络穿透接口:根据给定实体节点，根据持股关系向上（被持股方为下）、向下、不定向遍历获取穿透子图
          </p>
          <p style={textStyle}>
            2.
            关键股权路径发现接口:使用基于优先级的启发式关键路径发现算法获取两个节点间的关键持股路径
          </p>
          <p style={textStyle}>
            3.
            最终持股比例计算:在向上穿透子图基础上计算所有实体的最终持股比例，考虑多路径、有环路交叉持股网络
          </p>
        </div>
        <div id="8" style={divStyle}>
          <h1 style={textStyle2}>②控制权计算</h1>
          <p style={textStyle1}>- 需求背景：</p>
          <p style={textStyle}>
            目前金融市场的股权网络十分庞大且复杂，从而使得发现某一公司的实际控制人变得艰难。因此本模块依靠股权网络发现实际控制人，从而更加便于监管。由于股东之间的复杂关系会影响股东在决策时做出的行为，即股东与股东之间并不是相互独立的，这就造成了实质上股东对公司企业的控制权会有所变化。关系紧密的股东之间极有可能做出相同的决策，同时，彼此不和的股东也极有可能做出不同的投票决策行为。据此，根据该种影响关系将股东之间的复杂关系纳入到控制权计算中，得到基于股东关系及股权网络的控制权结果。
          </p>
          <p style={textStyle1}>- 功能概述：</p>
          <p style={textStyle}>
            1.
            实际控制人发现：以公司为核心节点，通过股权穿透提取子图以及控制权算法，从而得到各个股东对公司的控制权，最终以该控制权为基准计算得到前5个拥有最大控制权的股东。
          </p>
          <p style={textStyle}>
            2.
            股东关系发现：通过复杂的股东关系计算股东之间的关系权重，从而确定股东之间做出相同决策的可能性。
          </p>
          <p style={textStyle}>
            3. 融入外部关系的控制权计算：依赖股东之间的复杂关系，得到公司的最终股东。
          </p>
        </div>
        <div id="9" style={divStyle}>
          <h1 style={textStyle2}>③可视化分析</h1>
          <p style={textStyle1}>交叉持股：</p>
          <p style={textStyle}>主要计算不同时间下交叉持股公司，分析其演化过程；</p>
          <p style={textStyle1}>关键公司发现：</p>
          <p style={textStyle}>
            采用合理方式计算关键公司（如控制度、度中心性、中介中心性、接近中心性、特征向量中心性等），并分析其变化；
          </p>
          <p style={textStyle1}>公司社区发现：</p>
          <p style={textStyle}>使用传统社区演化分析算法分析公司社区演化情况。</p>
        </div>
        <div style={divStyle}>
          <h1 style={headStyle}>5、风险防控</h1>
        </div>
        <div id="10" style={divStyle}>
          <h1 style={textStyle2}>①交行：票据欺诈识别</h1>
          <p style={textStyle}>
            依据知识图谱挖掘企业间真实贸易链路，发现异常节点，接着引入股权等数据发现关联公司之间的密切联系，捕获公司之间的控制等关联，根据违法票据中介在图谱中节点特征，结合穿透分析算子构建中介风险侦测模型，使其有效识别预警中介非法套利行为。
          </p>
        </div>

        <div id="11" style={divStyle}>
          <h1 style={textStyle2}>②深证信：发债企业风险预警（新增）</h1>
          <p style={textStyle}>
            -
            股权穿透的应用，舆情监测的应用，结合众邦、深圳信需求，通过股权关联管理与核心企业评价指标进行核心企业白名单的输出，并附加信用评级指数。
          </p>
          <p style={textStyle}>
            -
            支持查询功能，用户输入目标企业，系统输出该企业信用评级指数，并输出其关联企业名单及信用情况，并进行通过阈值的白名单企业高亮标注。
          </p>
          <p style={textStyle}>- 输出名单信息除进行可视化展示外，支持下载。</p>
          <p style={textStyle}>- 并进行企业与其关联企业的关联关系展示。</p>
        </div>
      </div>
    </div>
  );
};

export default App;
